<template>
  <div style="width: 100%">
    <el-card class="general-card" :header-style="{ paddingBottom: '16px' }">
      <template #header v-if="showHeader">
        <div class="card-header">
          <div>{{title}}</div>
          <el-text class="mx-1" type="primary" @click="toDetail">Look Detail</el-text>
        </div>
      </template>
      <div class="chart-container">
        <Chart style="width: 100%; height: 470px" v-if="!loading" :options="options" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { ToolTipFormatterParams } from '@/types/echarts';
import useChartOption from '@/hooks/chart-option';
import Chart from '@/components/chart/index.vue'
const props = defineProps({
  data:{
    type: Array,
    default:[] //[{title:'',data:[]}]
  },
  xAxis: {
    type: Array<String>,
    default:[] // <string[]>[]
  },
  title: {
    type: String,
    default:''
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  theme: {
    type: String,
    default: 'light'
  }
})
const emit = defineEmits(['toDetail'])
const loading = ref(true)
const { chartOption } = useChartOption((isDark) => {
  return {
    grid: {
      left: '40',
      right: 0,
      top: '20',
      bottom: '100',
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      textStyle: {
        color: '#4E5969',
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: isDark?'#3f3f3f' : '#A9AEB8',
        },
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: '#86909C',
        },
        interval(idx: number) {
          if (idx === 0) return false;
          if (idx === props.xAxis.length - 1) return false;
          return true;
        },
      },
      axisLabel: {
        color: '#86909C',
        formatter(value: number, idx: number) {
          if (idx === 0) return '';
          if (idx === props.xAxis.length - 1) return '';
          return `${value}`;
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#86909C',
        formatter: '{value}',
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#3F3F3F' : '#E5E6EB',
        },
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[];
        return `<div>
          <p class="tooltip-title">${firstElement.axisValueLabel}</p>
          ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
        </div>`;
      },
      className: 'echarts-tooltip-diy',
    },
    series: [
    ],
    dataZoom: [
      {
        bottom: 40,
        type: 'slider',
        left: 40,
        right: 14,
        height: 14,
        borderColor: 'transparent',
        handleIcon:
          'image://http://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/1ee5a8c6142b2bcf47d2a9f084096447.svg~tplv-49unhts6dw-image.image',
        handleSize: '20',
        handleStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 4,
        },
        brushSelect: false,
        backgroundColor: isDark ? '#313132' : '#F2F3F5',
      },
      {
        type: 'inside',
        start: 0,
        end: 100,
        zoomOnMouseWheel: false,
      },
    ],
  };
});
watch(() => props.theme, () => {
  loading.value = true
  if (props.theme === 'light') {
    chartOption.value.yAxis.splitLine.lineStyle.color = '#F2F3F5'
    chartOption.value.dataZoom[0].backgroundColor = '#F2F3F5'
  } else {
    chartOption.value.yAxis.splitLine.lineStyle.color = '#3f3f3f'
    chartOption.value.dataZoom[0].backgroundColor = '#313132'
  }
  for (let i = 0; i < chartOption.value.series.length; i++) {
    chartOption.value.series[i].color = props.theme === 'dark'?linecolor[i%linecolor.length].dark:linecolor[i%linecolor.length].other
  }
  setTimeout(() => {
    loading.value = false
  })
}, {immediate: true})
watch(() => props.data,
  () => {
    console.log(props.data)
    if (!props.data || props.data.length === 0) {
      return
    }
    loading.value = true
    chartOption.value.xAxis.data = props.xAxis
    chartOption.value.series = []
    props.data.forEach((item, index) => {
      fetchData(item,index)
    })
    options.value = JSON.parse(JSON.stringify(chartOption.value))
    setTimeout(() => {
      loading.value = false
    })
  }
);
const options = ref([])
const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      (el) => `<div class="content-panel">
      <p>
        <span style="background-color: ${el.color}" class="tooltip-item-icon"></span>
        <span>${el.seriesName}</span>
      </p>
      <span class="tooltip-value">
      ${el.value}
      </span>
    </div>`
    )
    .join('');
};

const linecolor = [
  {
    dark: '#3D72F6',
    other:'#246EFF',
  },
  {
    dark: '#A079DC',
    other:'#00B2FF',
  },
  {
    dark: '#6CAAF5',
    other:'#81E2FF',
  },
]
const fetchData = async (data: any, index: number) => {
  try {
    chartOption.value.series.push({
      name: data.title,
      data: data.data,
      type: 'line',
      smooth: true,
      showSymbol: false,
      color: props.theme === 'dark'?linecolor[index%linecolor.length].dark:linecolor[index%linecolor.length].other,
      symbol: 'circle',
      symbolSize: 10,
      emphasis: {
        focus: 'series',
        itemStyle: {
          borderWidth: 2,
          borderColor: '#E0E3FF',
        },
      },
    })
  } catch (err) {
  }
};
onMounted(() => {
})
const toDetail = () => { 
  emit('toDetail')
}
</script>

<style scoped lang="scss">
  .chart-box {
    width: 100%;
    height: 230px;
  }
  .card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chart-container{
    width: 100%;
    height: 470px;
  }
</style>
